<template>
  <view class="lh">
    <button @click="getWeather">获取明天天气预报</button>
    <view class="tkw" v-if="tomorrowWeather">
      <view>日期：{{ tomorrowWeather.date }}</view>
      <view>星期：{{ tomorrowWeather.week }}</view>
      <view>最高温：{{ tomorrowWeather.high }}°C</view>
      <view>最低温：{{ tomorrowWeather.low }}°C</view>
    </view>
    <view class="loading" v-else>点击按钮获取天气...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tomorrowWeather: null
    };
  },
  methods: {
    getWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.data.status === 200) {
            const tomorrow = res.data.data.forecast[1];
            this.tomorrowWeather = {
              date: tomorrow.date,
              week: tomorrow.week,
              high: tomorrow.high.replace('℃', ''),
              low: tomorrow.low.replace('℃', '')
            };
          } else {
            uni.showToast({
              title: '获取天气失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.lh {
  padding: 20rpx;
}
button {
  margin-bottom: 30rpx;
}
.tkw {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
}
.loading {
  text-align: center;
  padding: 20rpx;
}
</style>